import React from "react";
import "./SeachBox.css";

class SearchBox extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      history:["赵喆","1","2","赵3","赵喆4","赵喆5","赵喆6","赵7喆"],
      isShow:false,
      selectIndex:0,
      text:''
    }
  }

  render(){
    return(
      <div>
        <input type="text"
        // value={this.state.text}
        ref="input"
        onInput={(event)=>{
          console.log(this.refs.input.value)
          this.props.sendMessage(this.refs.input.value)
        }}
        onFocus={()=>{
          this.setState({
            isShow:true
          })
        }}
        onBlur={()=>{
          this.setState({
            isShow:false
          })
        }}
        onKeyDown={(event)=>{
          // console.log(event.keyCode) 
          if(event.keyCode === 40){
            this.state.selectIndex++;
            if(this.state.selectIndex>=this.state.history.length){
              this.setState({
                selectIndex:0
              })
              return;
            }
            this.setState({
              selectIndex:this.state.selectIndex
            })
          }else if(event.keyCode === 38){
            this.state.selectIndex--;
            if(this.state.selectIndex<0){
              this.setState({
                selectIndex:this.state.history.length-1
              })
              return;
            }
           
            this.setState({
              selectIndex:this.state.selectIndex
            })

          }
          var temp = this.state.history[this.state.selectIndex];
          this.setState({
            text:temp
          })

        }}/>
        <div className={this.state.isShow?'history_active':'history_hidden'}>
          {
            this.state.history.map((element,index)=>{
              return <div className={this.state.selectIndex===index?'history_text':''}>{element}</div>
            })
          }
        </div>
      </div>
    )
  }
}

export default  SearchBox;